/* eslint-disable eqeqeq */
<template>
  <div class="organization-tree-container">
    <el-input style="margin-bottom:10px"
              placeholder="搜索分类"
              prefix-icon="el-icon-search"
              v-model="filterText"></el-input>
    <p class="tips">温馨提示：树形可通过鼠标右键维护</p>
    <div class="tree-container">
      <el-tree class="treeShow"
               :data="orgainzationTree"
               :props="defaultProps"
               node-key="org_id"
               ref="SlotMenuList"
               :highlight-current="true"
               :expand-on-click-node="true"
               :filter-node-method="filterNode"
               @node-contextmenu="rihgtClick"
               @node-click="getId"
               :default-expanded-keys="selectedNodeList"
               draggable
               :auto-expand-parent="false"
               :accordion="false">
        <span class="slot-t-node"
              slot-scope="{ node, data }">
          <!-- <span v-show="!node.isEdit"> -->
          <span>
            <!-- <span v-show="data.children && data.children.length >= 1"> -->
            <span v-show="data.children_list && data.children_list.length >= 1">
              <!-- <i :class="{'el-icon-time':node.level<=1,'el-icon-bell':node.level>1&&node.level<=2,'el-icon-service':node.level>2}" /> -->
              <!-- <i :class="{ 'el-icon-plus':!node.expanded,'el-icon-minus':node.expanded}" /> -->
              <i class="iconfont"
                 :class="{'icon_company':data.node_type==='1','icon_func_dept':data.node_type==='2','icon_job':data.node_type==='3'}"></i>
              <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']"
                    id="show-ellipsis"
                    :title="data.name||data.org_name">{{ data.name || data.org_name }}</span>
            </span>
            <!-- 当树形节点不存在子节点时，设置单独的图标 -->
            <!-- <span v-show="!data.children|| data.children.length == 0"> -->
            <span v-show="!data.children_list|| data.children_list.length == 0">
              <!-- <i class="el-icon-document"></i> -->
              <i class="iconfont"
                 :class="{'icon_company':data.node_type==='1','icon_func_dept':data.node_type==='2','icon_job':data.node_type==='3'}"></i>
              <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']"
                    id="show-ellipsis"
                    :title="data.org_name||data.name">{{data.name || data.org_name }}</span>
            </span>
          </span>
        </span>
      </el-tree>
    </div>

    <!--鼠标右键点击出现页面-->
    <div v-show="menuVisible">
      <el-menu id="rightClickMenu"
               class="el-menu-vertical"
               @select="handleRightSelect"
               active-text-color="#fff"
               text-color="#fff">
        <!-- 根据不同的状态，显示不同的右键自定义菜单（岗位与非岗位状态） -->
        <el-menu-item index="1"
                      v-show="DATA.node_type==='1'"
                      class="menuItem">
          <i class="el-icon-plus" />
          <span slot="title"
                @click="addCreate">新增子单位</span>
        </el-menu-item>
        <el-menu-item index="2"
                      class="menuItem"
                      v-show="DATA.node_type!=='3'">
          <i class="el-icon-edit" />
          <span slot="title"
                @click="addDepart">新增部门</span>
        </el-menu-item>
        <el-menu-item index="3"
                      class="menuItem"
                      v-show="DATA.node_type==='2'">
          <i class="el-icon-edit" />
          <span slot="title"
                @click="addPost">新增岗位</span>
        </el-menu-item>
        <el-menu-item index="6"
                      class="menuItem"
                      v-show="DATA.node_type==='3'">
          <i class="el-icon-edit" />
          <span slot="title">分配人员</span>
        </el-menu-item>
        <el-menu-item index="7"
                      class="menuItem"
                      v-show="DATA.node_type==='3'">
          <i class="el-icon-edit" />
          <span slot="title">分配权限模板</span>
        </el-menu-item>
        <el-menu-item index="4"
                      class="menuItem">
          <i class="el-icon-circle-plus-outline" />
          <span slot="title"
                @click="modifyCreate">修改</span>
        </el-menu-item>
        <el-menu-item index="5"
                      class="menuItem">
          <i class="el-icon-menu" />
          <span slot="title">删除</span>
        </el-menu-item>

      </el-menu>
    </div>
    <!-- 新增子或修改子单位 -->
    <el-dialog :visible.sync="addSonUnitDialog"
               :close-on-click-modal="false"
               :title="judge==1?'新增子单位':'修改子单位'"
               width="30%">
      <el-form :model="sonUnitform"
               label-width="80px">
        <el-form-item label="单位编号">
          <el-input v-model="sonUnitform.p_org_no"
                    autocomplete="off"
                    style="width:100%!important"
                    :disabled="true"
                    placeholder="请输入组织编号">
          </el-input>
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="sonUnitform.name"
                    autocomplete="off"
                    style="width:100%!important"
                    placeholder="请输入单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位类型">
          <el-select v-model="sonUnitform.org_type"
                     placeholder="请选择组织类型"
                     style="width:100%!important">
            <!-- <el-option label="第一级组织"
                       value="1">
            </el-option>
            <el-option label="第二级组织"
                       value="2">
            </el-option>
            <el-option label="第三级组织"
                       value="3">
            </el-option>
            <el-option label="第四级组织"
                       value="4">
            </el-option>
            <el-option label="第五级组织"
                       value="5">
            </el-option> -->
            <el-option v-for="(item, index) in orgTypeCodeList"
                       :key="index"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注"
                      class="add_tips">
          <el-input v-model="sonUnitform.remark"
                    autocomplete="off"
                    style="width:100%!important"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;">
        <el-button type="primary"
                   @click="addSonUnitDialog= false"
                   id="back-style">返 回</el-button>
        <el-button @click="createChildUnit"
                   id="save-style">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 新增或修改部门 -->
    <el-dialog :visible.sync="addDepDialog"
               :close-on-click-modal="false"
               :title="judgeDepart==1?'新增部门名称':'修改部门名称'"
               width="30%">
      <el-form :model="departmentForm"
               label-width="80px">
        <el-form-item label="部门名称">
          <el-input v-model="departmentForm.name"
                    autocomplete="off"
                    placeholder="请输入部门名称"
                    style="width:100%!important"></el-input>
        </el-form-item>
        <el-form-item label="部门类型">
          <el-select v-model="departmentForm.depStyle"
                     style="width:100%!important"
                     placeholder="请选择">
            <el-option v-for="item in depList"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注"
                      class="add_tips">
          <el-input v-model="departmentForm.remark"
                    autocomplete="off"
                    style="width:100%!important"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;">
        <el-button type="primary"
                   @click="addDepDialog= false"
                   id="back-style">返 回</el-button>
        <el-button @click="createDepartment"
                   id="save-style">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 新增或修改岗位 -->
    <el-dialog :visible.sync="addJobDialog"
               :close-on-click-modal="false"
               :title="judgePost==1?'新增岗位':'修改岗位'"
               width="30%">
      <el-form :model="JobForm"
               label-width="75px">
        <el-form-item label="岗位名称">
          <el-input v-model="JobForm.name"
                    autocomplete="off"
                    placeholder="请输入岗位名称"
                    style="width:100%!important"></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否部门主管">
          <el-checkbox v-model="JobForm.is_admin"
                       true-label="1"
                       false-label="0"></el-checkbox>
        </el-form-item> -->
        <el-form-item label="备注"
                      class="add_tips">
          <el-input v-model="JobForm.remark"
                    autocomplete="off"
                    style="width:100%!important"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;">
        <el-button type="primary"
                   @click="addJobDialog = false"
                   id="back-style">返 回</el-button>
        <el-button @click="createJob"
                   id="save-style">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>

import { OBSManageApi } from '@/services/OrgStrucManage'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  name: 'leftTree',
  props: {
    selectedNode: Object,
    assignedNode: Object,
    assignedTemplateNode: Object,
    rightMenu: Boolean,
    companyId: String
  },
  data () {
    var checkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入分类名称'))
      } else if ((/^[\s]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的分类名称'))
      } else {
        callback()
      }
    }
    var checkNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入分类编号'))
      } else if ((/^[\s]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的分类编号'))
      } else {
        callback()
      }
    }
    var checkEditName = (rule, value, callback) => {
      callback()
    }
    var checkEditNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入分类编号'))
      } else if ((/^[\s]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的分类编号'))
      } else {
        callback()
      }
    }
    return {
      judge: '', // 类型判断（新增/修改子单位）
      judgeDepart: '', // 类型判断(新增/修改部门)
      judgePost: '', // 类型判断(新增/修改岗位)
      info: this.messageinfo,
      treelist: [],
      type: this.treetype,
      filterText: '',
      addSonUnitDialog: false,
      addDepDialog: false, // 新增部门弹窗
      addJobDialog: false, // 新增岗位弹窗
      addNodeDialog: false, // 新增节点弹窗
      editNodeDialog: false, // 修改节点弹窗
      DATA: {

      },
      NODE: {

      },
      maxexpandId: this.maxid, // 新增节点开始id
      non_maxexpandId: this.maxid, // 新增节点开始id(不更改)
      // maxexpandId: 95, //新增节点开始id
      // non_maxexpandId: 95, //新增节点开始id(不更改)
      isLoadingTree: true, // 是否加载节点树
      //   setTree:api.treelist,//节点树数据
      level: 0, // 右键点击节点的等级
      childNodes: [],
      defaultProps: {
        children: 'children_list',
        label: 'name'
      },
      menuVisible: false,
      objectID: null,
      // 子单位
      sonUnitform: {
        org_name: '',
        org_type: '',
        remark: '',
        input_name: '',
        input_org_type: '',
        input_remark: '',
        name: ''
      },
      // 部门
      departmentForm: {
        dept_name: '',
        remark: '',
        input_name: '',
        input_remark: '',
        depStyle: '',
        name: ''
      },
      // 部门类型列表
      depList: [],
      // 岗位
      JobForm: {
        job_name: '',
        is_admin: '0',
        remark: '',
        input_name: '',
        input_remark: '',
        name: ''
      },
      // 分类（添加分类的弹窗表单）
      addNodeForm: {
        name: '',
        num: ''
      },
      addNodeRules: {
        name: [
          { validator: checkName, trigger: 'blur' }
        ],
        num: [
          { validator: checkNum, trigger: 'blur' }
        ]
      },
      // 修改分类的弹窗表单
      editNodeForm: {
        name: '',
        num: ''
      },
      editNodeRules: {
        name: [
          { validator: checkEditName, trigger: 'blur' }
        ],
        num: [
          { validator: checkEditNum, trigger: 'blur' }
        ]
      },
      nodeData: {},
      nodeLevel: 0,
      editNodeData: {},
      editNodeLevel: 0,
      orgainzationTreeParam: {

      },
      orgainzationTreeData: [],
      // 删除组织、部门、岗位时的参数对象
      deleteParam: {},
      // 新增或修改子单位
      createOrUpdateChildUnit: '',
      // 新增或修改部门
      createOrUpdateDepartment: '',
      // 新增或修改岗位
      createOrUpdateJob: '',
      // 选中的节点列表，用于刷新后展开到指定位置
      selectedNodeList: [],
      // 单位类型标准码列表
      orgTypeCodeList: []
    }
  },
  computed: {
    orgainzationTree () {
      let store = this.$store.state.orgainzationTree
      // let storage = JSON.parse(window.localStorage.getItem('orgainzationTree')) || []
      // let treeData = store.length > 0 ? store : storage
      return store || []
    }
  },
  methods: {
    // 新增/修改子单位
    addCreate () {
      this.judge = 1
    },
    modifyCreate () {
      this.judge = 2
    },
    // 新增/修改部门
    addDepart () {
      this.judgeDepart = 1
    },
    modifyDepart () {
      this.judgeDepart = 2
    },
    // 新增/修改岗位判断
    addPost () {
      this.judgePost = 1
    },
    // 节点点击事件获取id
    getId (obj, node, self) {
      obj.level = node.level
      this.menuVisible = false

      this.$emit('update:selectedNode', JSON.parse(JSON.stringify(obj)))
      if ((node.expanded || node.childNodes.length === 0) && obj.id) {
        this.addNodeList(obj.org_id)
      } else {
        this.removeNodeList(obj.org_id)
      }
    },
    // 当前节点是展开操作时,将当前节点的object_id添加到selectedNodeList中，为了刷新数据后能够展开到指定位置
    addNodeList (id) {
      let index = this.selectedNodeList.indexOf(id)
      if (index < 0) {
        this.selectedNodeList.push(id)
      }
    },
    // 当前节点是收起操作时，将当前节点的object_id从selectedNodeList中移除
    removeNodeList (id) {
      let index = this.selectedNodeList.indexOf(id)
      if (index >= 0) {
        this.selectedNodeList.splice(index, 1)
      }
    },
    // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
    filterNode (value, data) {
      console.log('data_csy=', data, value)
      // if (!value) return true
      // return data.name.indexOf(value) !== -1
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 右键弹出的菜单点击事件
    handleRightSelect (key) {
      if (key == 1) {
        // 新增子单位
        this.createChildUnitDialog(this.NODE, this.DATA, 'create')
        this.menuVisible = false // 关闭右键打开的操作菜单
      } else if (key == 2) {
        // 新增部门
        this.createDepartmentDialog(this.NODE, this.DATA, 'create')
        this.menuVisible = false
      } else if (key == 3) {
        this.createJobDialog(this.NODE, this.DATA, 'create')
        this.menuVisible = false
      } else if (key == 4) {
        // 修改子单位、部门、岗位
        // node_type为1是子单位，2是部门，3是岗位
        this.menuVisible = false
        if (this.DATA.node_type === '1') {
          this.createChildUnitDialog(this.NODE, this.DATA, 'update')
        } else if (this.DATA.node_type === '2') {
          this.createDepartmentDialog(this.NODE, this.DATA, 'update')
        } else if (this.DATA.node_type === '3') {
          this.createJobDialog(this.NODE, this.DATA, 'update')
        }
      } else if (key == 5) {
        // 删除
        this.NodeDel(this.NODE, this.DATA)
        this.menuVisible = false
      } else if (key == 6) {
        this.menuVisible = false
        this.$emit('update:assignedNode', this.DATA)
      } else if (key == 7) {
        this.menuVisible = false
        this.$emit('update:assignedTemplateNode', this.DATA)
      }
    },
    NodeEdit (n, d) {
      // 编辑节点
      if (d.code_type) { // 判断修改的是标准码管理页面的树形还是参数管理的树形
        this.editNodeForm.num = d.code_type
      } else {
        this.editNodeForm.num = d.para_type
      }
      this.editNodeForm.name = d.name
      this.editNodeData = d
      this.editNodeLevel = n.level
      this.editNodeDialog = true
    },
    NodeDel (n, d) {
      // 删除节点
      if (d.children_list && d.children_list.length !== 0) {
        this.$message.error('此节点有子级，不可删除！')
        return false
      } else {
        this.deleteParam = {}
        // 新增节点可直接删除，已存在的节点要二次确认
        // 删除操作
        // let DelFun = () => {
        //   this.$emit('deleteTreeNode', d.id)
        // }
        // 二次确认
        let ConfirmFun = () => {
          this.$confirm('是否删除此节点？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              if (d.node_type === '1') {
                this.deleteParam.company_id = d.company_id
                this.deleteParam.org_id = d.id
                this.deleteParam.org_no = d.no
                this.deleteOrg()
              } else if (d.node_type === '2') {
                this.deleteParam.company_id = d.company_id
                this.deleteParam.dept_id = d.id
                this.deleteParam.dept_no = d.no
                this.deleteDept()
              } else {
                this.deleteParam.job_id = d.id
                this.deleteJob()
              }
            })
            .catch(() => { })
        }
        // 判断是否是新增节点
        // d.id > this.non_maxexpandId ? DelFun() : ConfirmFun();
        ConfirmFun()
      }
    },
    // 调用删除组织api
    deleteOrg () {
      OBSManageApi.deleteChildUnit({
        data: this.deleteParam
      }).then(res => {
        console.log(res, 'delete child unit')
        if (res.code === 0) {
          this.$message.success('删除子单位成功')
          this.getOrgainzationTree()
        }
      })
    },
    // 调用删除部门api
    deleteDept () {
      OBSManageApi.deleteDepartment({
        data: this.deleteParam
      }).then(res => {
        console.log(res, 'delete department')
        if (res.code === 0) {
          this.$message.success('删除部门成功')
          this.getOrgainzationTree()
        }
      })
    },
    // 调用删除岗位api
    deleteJob () {
      OBSManageApi.deleteJob({
        data: this.deleteParam
      }).then(res => {
        console.log(res, 'delete job')
        if (res.code === 0) {
          this.$message.success('删除岗位成功')
          this.getOrgainzationTree()
        }
      })
    },
    NodeAdd (n, d) {
      // 新增节点
      // console.log(n, d);
      // 判断层级
      if (n.level >= 4) {
        this.$message.error('最多只支持三级！')
        return false
      }
      this.addNodeDialog = true
      this.nodeLevel = n.level
      this.nodeData = d
      // 同时展开节点
      if (!n.expanded) {
        n.expanded = true
      }
    },
    // 新增或修改子单位弹窗
    createChildUnitDialog (node, data, type) {
      console.log(data, 'create unit')
      // this.sonUnitform.company_id = data.company_id
      this.sonUnitform = {}
      let cloneData = JSON.parse(JSON.stringify(data))
      this.sonUnitform = Object.assign({}, cloneData)
      if (type === 'create') {
        this.judge = 1
        this.sonUnitform.name = ''
        this.sonUnitform.p_org_no = cloneData.no
        this.sonUnitform.org_type = ''
        this.sonUnitform.remark = ''
      } else {
        this.judge = 2
        this.sonUnitform.p_org_no = cloneData.no
        // this.sonUnitform.org_name = JSON.parse(JSON.stringify(cloneData.name))
        this.sonUnitform.org_type = cloneData.org_type
        this.sonUnitform.remark = cloneData.remark
        this.sonUnitform.org_id = cloneData.id
      }
      this.createOrUpdateChildUnit = type
      this.addSonUnitDialog = true
      console.log(this.sonUnitform, data, 'create child unit dialog')
    },
    // 调用新增或修改子单位接口
    createChildUnit () {
      this.sonUnitform.input_name = this.sonUnitform.name
      this.sonUnitform.input_node_type = '1'
      this.sonUnitform.input_org_type = this.sonUnitform.org_type
      this.sonUnitform.input_remark = this.sonUnitform.remark
      this.sonUnitform.org_name = this.sonUnitform.name
      delete this.sonUnitform.children_list
      if (this.createOrUpdateChildUnit === 'create') {
        OBSManageApi.createChildUnit({
          data: this.sonUnitform
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('新增子单位成功')
            this.getOrgainzationTree()
            this.addSonUnitDialog = false
          }

          console.log(res, 'create child unit api')
        })
      } else {
        OBSManageApi.updateChildUnit({
          data: this.sonUnitform
        }).then(res => {
          console.log(res, 'update child unit api')
          if (res.code === 0) {
            this.$message.success('修改子单位成功')
            this.getOrgainzationTree()
            this.addSonUnitDialog = false
          }
        })
      }
    },
    // 获取单位类型列表
    getDepList () {
      OBSManageApi.getDepList({
        params: {
          code_type: 'deptType',
          is_page: '1'
        }
      }).then(res => {
        console.log('depList', res)
        this.depList = res.data.list
      })
    },
    // 新增或修改部门弹窗
    createDepartmentDialog (node, data, type) {
      console.log(data, 'create department')
      // this.departmentForm.company_id = data.company_id
      // this.departmentForm.org_no = data.org_no
      this.departmentForm = {}
      this.departmentForm = JSON.parse(JSON.stringify(data))
      this.createOrUpdateDepartment = type
      if (type === 'create') {
        this.judgeDepart = 1
        this.departmentForm.p_dept_no = data.no || ''
        this.departmentForm.remark = ''
        this.departmentForm.name = ''
      } else {
        this.judgeDepart = 2
        this.departmentForm.p_dept_no = data.no || ''
        this.departmentForm.remark = data.remark
        this.departmentForm.dept_id = data.id
        this.$set(this.departmentForm, 'depStyle', data.dept_type)
      }
      this.addDepDialog = true
    },
    // 调用新增或修改部门接口api
    createDepartment () {
      this.departmentForm.input_node_type = '2'
      this.departmentForm.input_name = this.departmentForm.name
      this.departmentForm.input_remark = this.departmentForm.remark
      this.departmentForm.dept_name = this.departmentForm.name
      this.departmentForm.dept_type = this.departmentForm.depStyle
      delete this.departmentForm.children_list
      if (this.createOrUpdateDepartment === 'create') {
        OBSManageApi.createDepartment({
          data: this.departmentForm
        }).then(res => {
          console.log(res, 'create department api')
          if (res.code === 0) {
            this.$message.success('新增部门成功')
            this.getOrgainzationTree()
            this.addDepDialog = false
          }
        })
      } else {
        OBSManageApi.updateDepartment({
          data: this.departmentForm
        }).then(res => {
          console.log(res, 'update department api')
          if (res.code === 0) {
            this.$message.success('修改部门成功')
            this.getOrgainzationTree()
            this.addDepDialog = false
          }
        })
      }
    },
    // 新增或修改岗位弹窗
    createJobDialog (node, data, type) {
      this.JobForm = {}
      this.JobForm = JSON.parse(JSON.stringify(data))

      console.log(data, 'create job')
      if (type === 'create') {
        this.judgePost = 1
        this.JobForm.dept_id = data.id
        this.JobForm.remark = ''
        this.JobForm.name = ''
      } else {
        this.judgePost = 2
        // this.JobForm.job_name = data.name
        this.JobForm.dept_id = data.p_id
        this.JobForm.job_id = data.id
        this.JobForm.remark = data.remark
      }
      this.createOrUpdateJob = type
      this.addJobDialog = true
    },
    // 调用新增或修改岗位api
    createJob () {
      this.JobForm.input_name = this.JobForm.name
      this.JobForm.job_name = this.JobForm.name
      this.JobForm.input_node_type = '3'
      this.JobForm.input_remark = this.JobForm.remark
      delete this.JobForm.children_list
      if (this.createOrUpdateJob === 'create') {
        OBSManageApi.createJob({
          data: this.JobForm
        }).then(res => {
          console.log(res, 'create job api')
          if (res.code === 0) {
            this.$message.success('新增岗位成功')
            this.getOrgainzationTree()
            this.addJobDialog = false
          }
        }, res => {
          this.addJobDialog = false
        })
      } else {
        OBSManageApi.updateJob({
          data: this.JobForm
        }).then(res => {
          console.log(res, 'update job api')
          if (res.code === 0) {
            this.$message.success('修改岗位成功')
            this.getOrgainzationTree()
            this.addJobDialog = false
          }
        }, res => {
          this.addJobDialog = false
        })
      }
    },
    // 新增节点弹窗确认按钮
    sureAddNode (addNodeForm) {
      this.$refs[addNodeForm].validate((valid) => {
        if (valid) {
          this.addNodeDialog = false
          var obj = {}
          obj.level = this.nodeLevel
          obj.id = this.nodeData.id
          obj.system_no = this.nodeData.system_no
          obj.p_code_type = this.nodeData.p_code_type
          obj.para_type = this.nodeData.para_type
          obj.name = this.addNodeForm.name
          obj.num = this.addNodeForm.num
          this.$emit('addTreeNode', obj)
          this.$refs[addNodeForm].resetFields()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 修改节点弹窗确认按钮
    sureEditNode (editNodeForm) {
      this.$refs[editNodeForm].validate((valid) => {
        if (valid) {
          this.editNodeDialog = false
          var obj = {}
          obj.level = this.editNodeLevel
          obj.id = this.editNodeData.id
          obj.system_no = this.editNodeData.system_no
          obj.p_code_type = this.editNodeData.p_code_type
          obj.p_para_type = this.editNodeData.p_para_type
          obj.name = this.editNodeForm.name
          obj.num = this.editNodeForm.num
          this.$emit('editTreeNode', obj)
          this.$refs[editNodeForm].resetFields()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 右键点击事件
    rihgtClick (event, object, value, element) {
      this.level = value.level
      this.childNodes = value.childNodes
      this.$emit('getTreeNodeValue', value)
      if (this.rightMenu) {
        // if (this.objectID !== object.remark) {
        //   this.objectID = object.remark;
        //   this.menuVisible = true;
        //   this.DATA = object;
        //   this.NODE = value;
        // } else {
        //   this.menuVisible = !this.menuVisible;
        // }
        this.DATA = object
        this.NODE = value
        this.menuVisible = !this.menuVisible
        document.addEventListener('click', e => {
          this.menuVisible = false
        })
        console.log(this.DATA)
        let menu = document.querySelector('#rightClickMenu')
        let content = document.querySelector('.content-container')
        /* 菜单定位基于鼠标点击位置 */
        menu.style.left = event.clientX + 20 - 200 + 'px'
        menu.style.top = event.clientY - 100 + content.scrollTop + 'px'
        // console.log(event.clientY, content.scrollTop)
        menu.style.position = 'absolute' // 为新创建的DIV指定绝对定位
        menu.style.width = 140 + 'px'
      }
    },
    // 获取左侧组织树
    getOrgainzationTree () {
      this.orgainzationTreeParam.company_id = this.companyId
      OBSManageApi.getOrganizationTree({
        params: this.orgainzationTreeParam
      }).then(res => {
        console.log(res, 'orgainzation tree')
        if (res.code === 0) {
          let data = this.handelData(res.data)
          this.orgainzationTreeData = data
          this.$store.dispatch('setOrgainzationTree', this.orgainzationTreeData)
          window.localStorage.setItem('orgainzationTree', JSON.stringify(this.orgainzationTreeData))
        }
      })
    },
    // 获取组织类型标准码
    getOrgTypeCode () {
      standardCodeApi.getStandardCodeData({
        params: {
          code_type: 'orgType',
          is_page: 1
        }
      }).then(res => {
        console.log(res, 'get org type')
        if (res.code === 0) {
          this.orgTypeCodeList = res.data.list
        }
      })
    },
    // 处理传入的数据，手动赋值一个org_id，因为有些节点的id相同
    handelData (arr) {
      if (Object.prototype.toString.call(arr) === '[object Array]') {
        arr.map((item) => {
          // 除顶级目录和项目级别目录，项目级以下的权限项都可以选择
          item.org_id = item.id + item.no
          if (item.children_list) {
            this.handelData(item.children_list)
          }
        })
        return arr
      }
    },

  },
  // 监听值的改变
  watch: {
    filterText (val) {
      this.$refs.SlotMenuList.filter(val)
    },
    // 监听父组件的值是否发生了修改，如果修改了就将新值覆盖旧值
    messageinfo (newValue, oldValue) {
      this.info = newValue
      this.treelist = this.info
      // this.orgainzationTree = treelist;
    },
    treetype (newValue, oldValue) {
      this.type = newValue
    },
    maxid (newValue, oldValue) {
      this.maxexpandId = newValue
      this.non_maxexpandId = newValue
    }
  },
  created () {
    this.selectedNodeList = []
    // this.getOrgTypeCode()
    this.getDepList()
  },
  mounted () {
  },
  updated () {

  }
}
</script>
<style lang="scss" scoped>
/* 去掉默认的树形图标 */
/* .treeShow /deep/ .el-tree-node__content>.el-tree-node__expand-icon {
  display: none;
} */
#save-style {
  background: rgba(26, 188, 156, 1);
  color: white;
}
#back-style {
  background: rgba(26, 188, 156, 1);
}
#show-ellipsis {
  //display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.popover-new {
  /* position: absolute!important;
    right: 0;
    bottom: 0; */
}
/*顶部按钮*/
.slot-tree .slot-t-top {
  margin-bottom: 15px;
}
.slot-tree .slot-t-node span {
  display: inline-block;
}
/*节点*/
.slot-tree .slot-t-node--label {
  font-weight: 600;
}
/*输入框*/
.slot-tree .slot-t-input .el-input__inner {
  height: 26px;
  line-height: 26px;
}
/*按钮列表*/
.slot-tree .slot-t-node .slot-t-icons {
  display: none;
  margin-left: 10px;
}
.slot-tree .slot-t-icons .el-button + .el-button {
  margin-left: 6px;
}
.slot-tree .el-tree-node__content:hover .slot-t-icons {
  display: inline-block;
}

/*************************标签鼠标右击页面样式******************************/
.el-menu-vertical {
  /* border: 3px solid rgb(84, 92, 100); */
  border: 2px solid #f5f7fa;
  border-radius: 10px;
  z-index: 100;
}
.el-menu-vertical i {
  color: #777777;
}
.menuItem {
  height: 40px;
  line-height: 40px;
  /* background-color: #545c64; */
  background-color: #f5f7fa;
  font-size: 14px;
}
/deep/ .menuItem i {
  color: #606266 !important;
}
/deep/ .menuItem span {
  color: #606266 !important;
}
.menuItem:hover {
  background-color: #409eff;
}
/deep/ .menuItem:hover i {
  color: #fff !important;
}

/deep/ .menuItem:hover span {
  color: #fff !important;
}
.add_tips /deep/ .el-form-item__label {
  /* padding-left: 28px; */
}
.organization-tree-container {
  // margin-top: 20px !important;
  width: 100% !important;
  min-height: 260px;
  height: 100%;
  background-color: #fff;
  .tips {
    color: #9e9e9e;
    margin-bottom: 10px;
    text-align: center;
  }
  .tree-container {
    height: 86.5%;
    overflow-y: scroll;
  }
}
</style>
